<template>
  <div class="building-container">
    <h1>楼宇信息</h1>
    <ul>
      <li v-for="building in buildings" :key="building.id">
        <h2>{{ building.name }}</h2>
        <p>地址: {{ building.address }}</p>
        <p>楼层数: {{ building.floors }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      buildings: [
        { id: 1, name: 'A栋', address: '北京市朝阳区', floors: 10 },
        { id: 2, name: 'B栋', address: '上海市浦东新区', floors: 15 },
        { id: 3, name: 'C栋', address: '广州市天河区', floors: 20 }
      ]
    };
  }
};
</script>

<style scoped>
.building-container {
  padding: 20px;
  background-color: #f5f5f5;
}

h1 {
  color: #333;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  background-color: white;
  margin-bottom: 10px;
  padding: 15px;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

h2 {
  margin: 0;
  color: #007bff;
}

p {
  margin: 5px 0;
  color: #666;
}
</style>
